<template>
  <sky-base-page padding="0" bgPageColor="#f3f8f5">
    <view class="form-card">
      <uni-forms class="bang-form" ref="formRef"
                 label-position="top" label-width="400rpx" err-show-type="toast">
        <uni-forms-item name="img" label="头像">
          <qly-upload-multiple v-model="form.img" :limit="1"/>
        </uni-forms-item>
        <uni-forms-item name="title" label="标题">
          <view class="input-box">
            <input type="text" v-model="form.title" placeholder="请输入标题"/>
          </view>
        </uni-forms-item>
        <uni-forms-item name="specialty" label="广告信息">
          <up-textarea
              type="textarea"
              placeholder="请输入广告信息"
              v-model="form.content"
          ></up-textarea>
        </uni-forms-item>
      </uni-forms>
    </view>
    <template #footer>
      <view class="login-btn" @click="submit">
        保 存
      </view>
    </template>
  </sky-base-page>
</template>
<script setup>

const formRef = ref()
const form = ref({
  img: [],
  title: '',
  content: '',
})
const formNew = computed(() => {
  return {
    id: qly.page.params.id,
    ...form.value,
    img: form.value.img.map(item => item.url).join(','),
  }
})
// 保存
const submit = async () => {
  let res = {}
  if (qly.page.params.id) {
    res = await qly.api.user.tjgg(formNew.value)
  } else {
    res = await qly.api.user.tjgg(formNew.value)
  }

  if (res.code === 1) {
    qly.dialog.success(qly.page.params.id ? '修改成功' : '新增成功')
    uni.navigateBack()
  } else {
    qly.dialog.apiError(res).catch()
  }
}


const getSwiperInfo = async () => {
  const res = await qly.api.user.ggxq({id: qly.page.params.id})
  if (res.code === 1) {
    form.value = {
      id: res.data.id,
      img: [{
        url:res.data.img
      }],
      title: res.data.title,
      content: res.data.content,
    }
  } else {
    qly.dialog.apiError(res).catch()
  }
}
qly.page.onLoad(() => {
  if (qly.page.params.id) {
    getSwiperInfo()
  }
})
</script>
<style lang="scss" scoped>
.header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 400rpx;
  padding: 0 32rpx;
  box-sizing: border-box;

  .left-box {
    .hello {
      font-family: D-DIN-DIN, D-DIN-DIN;
      font-weight: bold;
      font-size: 80rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      color: #293845;
    }

    .desc {
      color: #293845;
      font-weight: bold;
      font-size: 34rpx;
    }
  }

  .logo-phone {
    width: 160rpx;
    height: 160rpx;
    border-radius: 12rpx;
  }
}

.form-card {
  width: 92%;
  margin: 20rpx auto;
  padding: 32rpx;
  box-sizing: border-box;
  border-radius: 18rpx;
  background-color: #fff;
}

.bang-form {
  flex: 1;
  overflow: auto;
}

.yuan-phone {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.login-btn {
  color: #fff;
  width: 90%;
  height: 96rpx;
  background: #00C76A;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 30rpx;
  margin: 0 auto;
}

.input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48rpx 0 24rpx;
  width: 100%;
  height: 80rpx;
  background: #F5F5F5;
  border-radius: 16rpx;
  font-size: 32rpx;
  box-sizing: border-box;

  input {
    width: 100%;
  }

  .code-box {
    margin-right: 50rpx;
  }
}

.gray-text {
  color: #909399;
}
</style>
